<template>
    <h2>户型数据展示</h2>

    户型名称:
    <input type="text" v-model="name">
    户型结构:
    <select v-model="tId"> 
        <option value="0">--请选择--</option>
        <option v-for="item in Bang" :value="item.tId">{{ item.tName }}</option>
    </select>
    <input type="button" value="查询" @click="Show">
    
    <a href="AddHouse">添加</a>


    <table border="1">
        <thead>
            <tr>
                <th>建筑面积</th>
                <th>编号</th>
                <th>户型名称</th>
                <th>户型结构</th>
                <th>装修标准</th>
                <th>套内面积</th>
                <th>户型图</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.zongSize}}</td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.tName}}</td>
                <td>{{item.zhuangBiao}}</td>
                <td>{{item.taoSize}}</td>
                <td>
                    <a :href="item.img">查看图片</a>
                </td>
                <td>
                    <input type="button" value="删除" @click="Delete(item.id)">
                    <input type="button" value="修改" @click="Update(item.id)">
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router =useRouter();

onMounted(()=>{
    Show();
    Bin();
})

const Bang=ref([{
    "tId": 0,
    "tName": ""
}])

const Bin=()=>{
    axios.get("https://localhost:7284/api/House/GetAll")
    .then(res=>{
        Bang.value=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}

const info=ref([{
   "id": 0,
    "name": "",
    "tId": 0,
    "zhuangBiao": "",
    "zongSize": "",
    "taoSize": "",
    "img": "",
    "delete": 0,
    "tName": ""
}])
const name=ref("")
const tId=ref()

const Show=()=>{
    axios.get("https://localhost:7284/api/House/Show",{
        params:{
            name:name.value,
            tId:tId.value
        }
    })
    .then(res=>{
        info.value=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}

const Delete=(id:number)=>{
    if(confirm("确认删除吗？")){
        axios.delete("https://localhost:7284/api/House/Delete",{
        params:{
            id:id
        }
    })
    .then(res=>{
        if(res.data>0){
            alert("删除成功")
            Show();
        }
        else{
            alert("删除失败")
        }
    })
    .catch(error=>{
        console.log(error);
    })
    }
}

const Update=(id:number)=>{
    router.push({
        name:'UpdateHouse',
        params:{
            id:id
        }
    })
}
</script>
